<template>
    <div><h2>每日记事本</h2>
        <input type="text" id="newnote" v-model="message" v-on:keyup.enter="add" placeholder="按回车添加计划">
        <thinglist v-for='(item,index) of things ' :key='index' :param='item' :listturn='index' @delect='delecttest'>
            <input type="checkbox" class="thingbox" @click="check"></thinglist>
        <p>已完成{{finished}}/{{all}}</p>
        <button v-on:click="delectall" id="alldect">删除全部被勾选的计划</button>
      </div>
      
  
</template>

<script>
import thinglist from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    thinglist
  },
  data:function() {
          return{
            message: '',
            things: [],
            finished: 0,
            all: 0
            }
            
        },

        methods: {
            delecttest: function (listturn) {
                this.things.splice(listturn, 1)
                this.all -= 1
            },
            add: function () {

                this.message = document.getElementById("newnote").value
                this.things.push(this.message)
                this.all = this.things.length
            },
            check: function () {
                let checkboxes = document.getElementsByClassName("thingbox")
                // console.log(checkboxes)
                this.finished = 0
                for (let i = 0; i < this.things.length; i++) {
                    //console.log(i)
                    if (checkboxes[i].checked == true) {
                        this.finished++
                    }
                }
            },
            delectall: function () {
                let checkboxes = document.getElementsByClassName("thingbox")
                let num = 0
                let len = this.things.length
                for (let i = 0; i < len; i++) {
                    // console.log(i)

                    if (checkboxes[i].checked == true) {
                        this.things.splice(i, 1)
                        num++
                        // console.log(this.things)
                    }
                }
                this.finished = 0
                this.all -= num
                for (let j = 0; j < this.things.length; j++) {
                    checkboxes[j].checked = false
                }
            }
        }
}
</script>

<style>
.dbutton {
        width: 90px;
        float: left;
        position: absolute;
        left: 240px;
    }
</style>
